<title>表单组合</title>
<style>
.more_goods{position: relative;}
.close_btn{position: absolute;top: 5px;right: 5px;}
.close_btn i{color: red;font-size: 50px;}
</style>
<div class="layui-card layadmin-header" style="height: 50px; line-height: 50px;">
	<div class="layui-breadcrumb" lay-filter="breadcrumb" style="padding: 0 15px;">
		<a lay-href="">商家中心</a>
		<a><cite>发布推广任务</cite></a>
	</div>
</div>

<div class="layui-fluid jetee">
	<div class="layui-card">
		<h3 class="layui-card-header">发布推广任务-第二步 填写商品信息</h3>
		<div class="layui-card-body" style="padding: 15px;">
			<form class="layui-form" action="" lay-filter="LAY-user-back-manage" onsubmit="return false;">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label"><span class="layui-badge">必填</span> 选择店铺</label>
						<div class="layui-input-block">

								<script type="text/html" template>
								<select name="store_id" lay-verify="required" lay-search="">
									<option value="">请选择</option>
									{{#  layui.each(pidan['store'], function(index, item){ }}
									{{#  if(item['mall_id'] == layui.je_task_add[1]['mall_id']){ }}
										<option value="{{ item['id'] }}">{{ item['name'] }}</option>
									{{#  } }}
									{{#  }); }}
								</select>
								</script>
							</div>
					</div>
					<div class="layui-inline">
						<button class="layui-btn layuiadmin-btn-admin" data-type="add" type="button">去绑定店铺</button>
					</div>
				</div>

				<div class="more_goods">
					<div class="layui-row">
						<div class="layui-col-lg9">

							<div class="layui-form-item">
								<label class="layui-form-label"><span class="layui-badge">必填</span> 商品名称</label>
								<div class="layui-input-block">
									<input type="text" name="goodsname[0]" lay-verify="required" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label"><span class="layui-badge">必填</span> 商品链接</label>
								<div class="layui-input-block">
									<input type="text" name="goodsurl[0]" lay-verify="url" placeholder="请输入" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label"><span class="layui-badge">必填</span> 商品主图</label>
								<div class="layui-input-block">
									<div class="camera-area" data-id="1">
										<input class="save" type="hidden" name="goodsimage[0]"/>
										<input type="file" class="fileToUpload hide" accept="image/*" />
										<p class="thumb_template" onclick="layui.common.upload(this);"></p>
										<span class="upload_progress"></span>
									</div>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label"><span class="layui-badge">必填</span> 商品详情页中答案词</label>
								<div class="layui-input-block layui-font-gray">
									<input type="text" name="goodskeyword[0]" lay-verify="required" placeholder="目的：增加买手浏览商品详情页停留时间"  class="layui-input">
									填写【商品详情页】某个词作为答案。最少2个字，最多10个字，只能输入汉字/字母/数字，不能带有符号、空格。
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label"><span class="layui-badge">必填</span> 单品售价</label>
								<div class="layui-input-block">
									<input type="number" name="goodsprice[0]" lay-verify="number" placeholder="用户付款价格"  step="0.1" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label"><span class="layui-badge">必填</span> 每单拍(件)</label>
								<div class="layui-input-block">
									<input type="number" name="goodsnum[0]" lay-verify="number" placeholder="请输入" value="1" step="1" class="layui-input">
								</div>
							</div>
						</div>
					</div>
					<hr class="layui-border-red">

					<div class="close_btn layui-hide" onclick="layui.del_more_goods(this);">
						<i class="layui-icon layui-icon-close-fill"></i>
					</div>
				</div>

				<div class="layui-form-item" style="border-top: 1px solid #ccc;padding: 20px;">
					<button type="button" class="layui-btn layui-btn-xs" onclick="layui.add_more_goods();">+ 增加附加商品</button>（可多增加2个商品, +2元/个）
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">订单留言</label>
					<div class="layui-input-block">
						<input type="text" name="ordermsg" placeholder="用户拍下商品所需要填写的买家留言" class="layui-input">
					</div>
				</div>

				<script type="text/html" template>
					<input type="hidden" name="id" value="{{ layui.je_task_add[0].id }}">
				</script>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="layui-footer">
							<button class="layui-btn" onclick="layui.common.go('/task/add#maxstep='+layui.je_task_add[0].maxstep+'&id='+layui.je_task_add[0].id)" type="button">上一步</button> <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1" type="button" >下一步</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script src="../static/js/uploader.jquery.js"></script>

<script>
layui.use(['admin', 'form', 'laydate'], function(){
	var $ = layui.$
	,admin = layui.admin
	,layer = layui.layer
	,form = layui.form
	,view = layui.view
	,je=layui.common;
	//重开页面载入数据
	if(!layui.je_task_add){
		//从本地取
		layui.je_task_add=je.storage('je_task_add');
	}
	//保存 附加商品格式
	var more_goods_html= '<div class="more_goods">'+$(".more_goods:first").html()+"</div>";

	setTimeout(function(){
		//主图
		je.fileUpload($(".camera-area"));
		//重载
		if(layui.je_task_add[2]){
			$(".more_goods:last").find('.thumb_template').html('<img src="../uploads/imgs/'+layui.je_task_add[2]['goodsimage[0]']+'">');

			//附加商品
			for (var i=1;i<=layui.je_task_add[2]['moregoods'];i++){
				layui.add_more_goods();
				var last=$(".more_goods:last");
				last.find('.thumb_template').html('<img src="../uploads/imgs/'+layui.je_task_add[2]['goodsimage['+i+']']+'">');
			}
			//表单重载值
			layui.je_task_add[2].id=layui.je_task_add[0].id;//id校准
			form.val("LAY-user-back-manage",layui.je_task_add[2]);
		}
		form.render(null, 'LAY-user-back-manage');
	},100);

	//绑定店铺
	$('.layui-btn.layuiadmin-btn-admin').on('click', function(){
		admin.popup({
			title: '添加店铺'
			,area: ['420px', '500px']
			,id: 'LAY-popup-useradmin-add'
			,success: function(layero, index){
				view(this.id).render('store/info',{'status':true}).done(function(){
					form.render(null, 'layuiadmin-form-admin');
					//提交
					form.on('submit(LAY-user-back-submit)', function(data){
						admin.req({
							url: './store/add'
							,type: 'post'
							,data: data.field
							,done: function(res){
								je.update_cache('store',function(res){
									location.reload();
								});
							}
						});

					});
				});
			}
		});
	});




	/* 提交 */
	form.on('submit(component-form-demo1)', function(data){
		let field=data.field;
		//生成临时信息记录
		admin.req({
			url: './task/add2'
			,type: 'post'
			,data:field
			,done: function(res){
				delete field.access_token;
				layui.je_task_add[0].step=2;
				layui.je_task_add[0].maxstep>2 ? '' : layui.je_task_add[0].maxstep=2;
				field['moregoods']=res.data['moregoods'];
				layui.je_task_add[2]=field;
				je.storage('je_task_add',layui.je_task_add);
				//跳转到下一步
				location.hash = '/task/add3';
			}
			,loading:true
		});

		return false;
	});





	layui.add_more_goods=function(){
		let len=$(".more_goods").length;
		if(len==3){
			view.error1('最多加2个附加商品');
		}else{
			$(".more_goods:last").after(more_goods_html.replace('layui-hide','').replaceAll("[0]", "["+len+"]"));
			je.fileUpload($(".more_goods:last .camera-area"));
		}
	}
	layui.del_more_goods=function(that){
		$(that).parent().remove();
		//更新name
		for(var i=1;i<=2;i++)
		$(".more_goods:eq("+i+") input[name]").each(function(j){
			var that=$(this);
			that.attr('name',that.attr('name').replace(/\[\d\]/, '['+i+']'));
		});
	};

});
</script>